<template>
  <view class="tabBody">
    <view class="flex" v-show="props.tab == 1">
      <view class="site-left flex flex-direction">
        <view>
          <image src="../assets/images/index/我要发货/shouye_icon_fahuo.png" style="width: 42px;height: 42px;" />
        </view>
        <view class="border-dash"></view>
        <view class="margin-t80">
          <image src="../assets/images/index/我要发货/shouye_icon_shouhuo.png" style="width: 42px;height: 42px;" />
        </view>
      </view>
      <view class="site-right width100">
        <view class="flex align-center sh-solid justify-between">
          <view @click="addAddress(AddressInfoDirection.Sender)">
            <view class="sh-text-color sh-font-ls sh-line-height48 sh-bold">{{ props.sendInfo ?
              `${props.sendInfo?.preName} ${props.sendInfo?.preTel}` : '请输入发货信息' }}</view>
            <view class="sh-write-color sh-font-sm addressIndex" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:450rpx">{{ props.sendInfo ? props.sendInfo?.preAddress :
              '您要从哪里发货' }}</view>
          </view>
          <view class="flex flex-direction align-center" @click="goAddressBook(AddressInfoDirection.Sender)">
            <image src="../assets/images/index/我要发货/icon_dizhibu.png" style=" width: 28px;height: 28px; " />
            <text class="sh-gary-color sh-font-size">地址簿</text>
          </view>
        </view>
        <view class="flex align-center justify-between margin-t10">
          <view @click="addAddress(AddressInfoDirection.Getter)">
            <view class="sh-text-color sh-font-ls sh-line-height48 sh-bold">{{ props.getInfo ? `${props.getInfo?.preName}
                          ${props.getInfo?.preTel}` : '请输入收货信息' }}</view>
            <view class="sh-write-color sh-font-sm" style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:450rpx">{{ props.getInfo ? props.getInfo?.preAddress : '您要把货发往哪里' }}</view>
          </view>
          <view class="flex flex-direction align-center " @click="goAddressBook(AddressInfoDirection.Getter)">
            <image src="../assets/images/index/我要发货/icon_dizhibu.png" style="width: 28px;height: 28px; " />
            <text class="sh-gary-color sh-font-size">地址簿</text>
          </view>
        </view>
      </view>

    </view>
    <view class="search" v-show="props.tab == 0">
      <Search style="margin-left:25rpx;margin-rihgt:10rpx"></Search>
      <input type="text" placeholder="请输入关键字或运单号" v-model="searchValue">
      <view class="imgs" v-if="!searchValue" @click="delS"></view>
      <view class="imge" v-if="searchValue" @click="delS"></view>
    </view>
    <view class="margin-t40" v-if="props.tab === 1">
      <button class="cu-btn round lg sh-white-color theme-bg width100" @click="gotoSendGood">立即下单</button>
    </view>
    <view class="margin-t40" v-if="props.tab === 0">
      <button class="cu-btn round lg sh-white-color theme-bg width100" @click="gotoTracking">立即查询</button>
    </view>
    <!-- 提示弹框 -->
    <nut-notify v-model:visible="notiShow" msg="暂无运单信息" />

    <send-form
        :show="showSendForm"
        :type="sendType"
        :operateType="'add'"
        @close="closeSendForm"
    ></send-form>
  </view>
</template>

<script lang="ts" setup>
import { Search } from "@nutui/icons-vue-taro";
import { AddressInfoDirection } from "@/type";
import Taro from "@tarojs/taro";
import { ref } from "vue";
import { AddressInfo } from "@/@api/AddressInfo";
import { $post,getPoorderByBillNo,noUserToLogin } from "@/@api";
import useMyOrderStore from "../store/myOrder";
import useUserInfoStore from "@/store/user";
import logisticsInfoStore from "@/store/logistics";
import { reset } from "@/pages/sendGoods/reset";

const store = useMyOrderStore()
const logisticsStore = logisticsInfoStore()
const userStore = useUserInfoStore()

const showSendForm = ref<boolean>(false)
const sendType = ref<string>('1')

const notiShow = ref(false);

const props = defineProps<{
  tab: number;
  sendInfo: AddressInfo | null;
  getInfo: AddressInfo | null;
}>();
const emit = defineEmits<{
  (e: "goAddressBook", args: any): void;
}>();
const searchValue = ref<string>("");

function delS() {
  searchValue.value = "";
}
function goAddressBook(val: AddressInfoDirection) {
  emit("goAddressBook", val);
}



function gotoSendGood() {
  noUserToLogin()
  reset()
  Taro.navigateTo({
    url: "/pages/sendGoods/index",
  });
}
function addAddress(val) {
  sendType.value = val
  showSendForm.value = true
}
function closeSendForm(refresh: boolean) {
  showSendForm.value = false
  if(refresh){

  }
}
async function gotoTracking() {
  if(!searchValue.value){
    return Taro.showToast({
      icon: 'none',
      title: '请输入关键字或运单号'
    })
  }
  noUserToLogin()
  getPoorderByBillNo({
    billNo: searchValue.value || '',
    orderCode: '', //后端说这个字段暂时先传空
  }).then((res:any)=>{
    if(res.code === 200) {
      logisticsStore.info = res.data;
      Taro.navigateTo({
        url: "/pages/myOrder/waybillTracking",
      });
      // Taro.navigateTo({
      //   url: "/pages/orderTracking/map",
      // });
    }
    else {
      Taro.showToast({
        icon: 'none',
        title: '未查询到运单'
      })
    }
  }).catch((err)=>{
    console.log('err',err)
    Taro.showToast({
      icon: 'none',
      title: '未查询到运单'
    })
  })
}
async function gotoWaybillTracking(V11: string) {
  let res = await $post<any>("/order/orderTrackInfo", {
    openId: "oN9cn09rkm0cceEHq1VUfCd4LP4k",
    orderid: V11,
  });
  if (res.data.data.length > 0) {
    store.trackingList = res.data.data[0];
    Taro.navigateTo({
      url: "/pages/myOrder/waybillTracking",
    });
  } else {
    notiShow.value = true;
  }
}
</script>

<style lang="scss">
.addressIndex {
  width: 450rpx;
}

.tabBody {
  box-sizing: border-box;
  width: 700px;
  background-color: white;
  margin-left: 25rpx;
  border-radius: 0 0 15px 15px;
  padding: 52px 28px;
  margin-right: 24px;
  // display: flex;
  // justify-content: center;
  // flex-direction: column;

  .sh-white-color {
    color: #fff;
  }

  .site-left {
    position: relative;

    .border-dash {
      position: absolute;
      top: 60px;
      left: 40px;
      height: 100px;
      border-left: 2px dashed #ccc;
    }
  }

  .site-right {
    color: #252525;

    .sh-write-color {
      color: #c4c4c4;
    }

    .sh-gary-color {
      color: #666;
    }
  }

  .top {
    width: 100%;
    height: 170rpx;
    display: flex;
    align-items: center;

    .row {
      width: 100%;
      height: 120rpx;
      display: flex;

      .img {
        height: 60%;
        width: 74rpx;
        background: url("../assets/images/index/我要发货/shouye_icon_fahuo.png") no-repeat;
      }

      .text {
        width: 75%;
        height: 100%;

        .input {
          width: 100%;
          height: 50%;
          display: flex;
          // justify-content: center;
          align-items: center;
          font-family: PingFang SC;
          font-size: 32rpx;
          color: #252525;
        }

        .tips {
          width: 100%;
          height: 50%;
          display: flex;
          // justify-content: center;
          // align-items: center;
          color: #c4c4c4;

          font-size: 24rpx;
          font-family: PingFang SC;
        }
      }

      .last {
        width: 15%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        .imgs {
          height: 47%;
          width: 74rpx;
          background: url("../assets/images/index/我要发货/icon_dizhibu.png") no-repeat center;
        }

        .texts {
          display: flex;
          justify-content: center;
          align-items: center;
          color: #666666;
          font-size: 20px;
        }
      }
    }
  }

  .tabBody .line {
    width: 90%;
    height: 2rpx;
    background: rgba(0, 0, 0, 0.06);
  }

  .bottom {
    width: 100%;
    height: 170rpx;
    display: flex;
    align-items: center;

    .row {
      width: 100%;
      height: 120rpx;
      display: flex;

      .img {
        height: 60%;
        width: 74rpx;
        background: url("../assets/images/index/我要发货/shouye_icon_shouhuo.png") no-repeat;
      }

      .text {
        width: 75%;
        height: 100%;

        .input {
          width: 100%;
          height: 50%;
          display: flex;
          // justify-content: center;
          align-items: center;
          font-family: PingFang SC;
          font-size: 32rpx;
          color: #252525;
        }

        .tips {
          width: 100%;
          height: 50%;
          display: flex;
          // justify-content: center;
          // align-items: center;
          color: #c4c4c4;

          font-size: 24rpx;
          font-family: PingFang SC;
        }
      }

      .last {
        width: 15%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        .imgs {
          height: 47%;
          width: 74rpx;
          background: url("../assets/images/index/我要发货/icon_dizhibu.png") no-repeat center;
        }

        .texts {
          display: flex;
          justify-content: center;
          align-items: center;
          color: #666666;
          font-size: 20px;
        }
      }
    }
  }

  .search {
    display: flex;
    box-sizing: border-box;
    padding: 0 30px 0 10px;
    width: 100%;
    background: #efefef;
    height: 100rpx;
    border-radius: 25rpx;
    margin-bottom: 25rpx;
    display: flex;
    align-items: center;

    input {
      margin-left: 10px;
      flex: 1;
    }

    .imgs {
      width: 40rpx;
      height: 100%;
      background: url("../assets/images/index/我要查件/shouye_icon_saoma.png") no-repeat center;
    }

    .imge {
      width: 40rpx;
      height: 100%;
      background: url("../assets/images/index/我要查件/shouye_icon_qingchu.png") no-repeat center;
    }
  }
}
</style>
